<template>
	<view class="setup">
		<view class="head">
			<view class="head_li">
				<uni-icons v-show="!setAccount" type="back" size="30" color="#fff" class="icon_back"
					@click="navigBack"></uni-icons>
				<text class="title">账号管理</text>
				<text class="right" @click="setAccount=true" v-show="!setAccount">编辑</text>
				<text class="right" @click="setAccount=false,index=null" v-show="setAccount">完成</text>
			</view>
		</view>
		<view class="body">
			<view class="friend_info">
				<view class="info">
					<view class="info_item" @click="uptCurrent(i)"
						:style="[(index==i)?style:{},(activeColor==i)?{backgroundColor:'#d6d6d6'}:{}]"
						@touchstart="touchstart(i)" @touchend="touchend(null)" v-for="(item,i) in InfoList" :key="i">
						<image src="../../static/message-icons/deleteAccount.png" class="dle" v-show="setAccount"
							@touchstart.stop @click.stop="transForm(i)"></image>
						<image :src="item.avatar"></image>
						<view class="detail">
							<text>{{item.nickName}}</text>
							<text>{{item.account}}</text>
						</view>
						<image src="/static/message-icons/Checkmark.png" class="icon"
							v-show="!setAccount && current == i"></image>
						<view class="reddle" @click.stop="modelTwo=true,deleteIndex=i">删除</view>
					</view>
				</view>
				<view class="create" v-show="!setAccount" @click="NavigatorAddUser">
					<view class="circle">
						<uni-icons type="plusempty" size="30" color="#9c9c9c" class="icon"></uni-icons>
					</view>
					<text>添加或注册账号</text>
				</view>
			</view>
			<up-popup :show="show" @close="show=false" mode="bottom" bgColor="transparent">
				<view class="b_pop">
					<view class="p_head">
						<view class="item" @click="model = true">退出登录</view>
						<view class="item">退出轩聊</view>
					</view>
					<view class="p_btom" @click="show = false">
						<text>取消</text>
					</view>
				</view>
			</up-popup>
			<up-modal :show="model" :showCancelButton="true" @confirm="outLogin" :closeOnClickOverlay="true"
				@close="model=false" @cancel="model=false">
				<view class="contont">
					<text>确定要退出登录吗？连续在线记录会清空哦</text>
				</view>
			</up-modal>
			<up-modal :show="modelTwo" :showCancelButton="true" @confirm="deleteAccount" :closeOnClickOverlay="true"
				@close="modelTwo=false" @cancel="modelTwo=false">
				<view class="contont">
					<text>确定要删除该账号吗？</text>
				</view>
			</up-modal>
			<view class="d_friend" @click="NavigatorPwd" v-show="!setAccount">
				<text>修改密码</text>
			</view>
			<view class="d_friend" @click="show = true" v-show="!setAccount">
				<text>退出</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
	} from 'vuex'
	import { outLogin,login,} from '../../common/api'; 
	export default {
		computed: {
			...mapState('info', ['myInfo', 'InfoList']),
		},
		data() {
			return {
				index: null,
				show: false,
				model: false,
				modelTwo: false,
				current: 0,
				setAccount: false,
				activeColor: null,
				deleteIndex: null, //删除的索引
				transX: "0",
				style: {
					transform: `translateX(-200rpx)`,
				}
			};
		},
		created() {
			for(let i=0;i<this.InfoList.length;i++){
				if(this.myInfo.id === this.InfoList[i].id){
					this.current = i;
					return;
				}
			}
		},
		methods: {
			...mapMutations('info', ['CreateMyInfo', 'deleteInfoList']),
			navigBack() {
				uni.navigateTo({
					url: '/subpkg/personal_details/personal_details?fid=' + this.myInfo.id
				})
			},
			NavigatorAddUser(){
				uni.navigateTo({
					url: '/subpkg/addUser/addUser'
				})
			},
			NavigatorPwd(){
				uni.navigateTo({
					url: '/subpkg/setPwd/setPwd'
				})
			},
			outLogin() {
				this.model = false;
				outLogin({id:this.myInfo.id}).then((res)=>{
					if(res.code == 200){
						uni.removeStorageSync('myInfo');
						uni.navigateTo({
							url: '/subpkg/login/login'
						})
					}
				});
			},
			deleteAccount() {
				this.deleteInfoList(this.deleteIndex);
				this.modelTwo = false;
			},
			transForm(i) {
				this.index = i;
			},
			touchstart(i) {
				this.activeColor = i;
			},
			touchend(i) {
				this.activeColor = i;
			},
			uptCurrent(i) {
				this.index = null;
				this.deleteIndex = null;
				if (!this.setAccount) {
					if(this.current == i) return;
					uni.showLoading();
					let data = this.InfoList[i];
					login({
						account:data.account,
						password:data.password
					}).then((res) => {
						let resData = res.data;
						if (res.code == 200) {
							outLogin({id:this.myInfo.id}).then((res)=>{
							});
							this.current = i;
							uni.setStorageSync('token',res.token);
							this.CreateMyInfo(resData);
							setTimeout(()=> {
								uni.showToast({
									title: '切换成功',
									duration: 2000
								})
							}, 2000);
						}else{
							uni.showToast({
								title: '账号信息过期',
								duration: 2000
							})
							uni.navigateTo({
								url: '/subpkg/addUser/addUser'
							})
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.setup {
		.head {
			background: linear-gradient(90deg, rgba(122, 220, 241, 1) 0%, rgba(43, 163, 242, 1) 48%);
			width: 750rpx;
			height: 150rpx;
			position: fixed;

			.head_li {
				position: absolute;
				bottom: 0;
				width: 750rpx;
				height: 120rpx;
				display: flex;
				line-height: 100rpx;
				padding: 0rpx 0rpx;

				text {
					color: #fff;
					font-size: 33rpx;
					opacity: 0.8;
					padding-top: 15rpx;
					display: flex;
					line-height: 80rpx;
				}

				.title {
					position: absolute;
					left: 310rpx;
				}

				.right {
					position: absolute;
					right: 30rpx;

					&:active {
						transform: scale(0.98);
					}
				}

				.icon_back {
					padding: 15rpx 20rpx;
				}
			}
		}

		.body {
			width: 750rpx;
			position: fixed;
			top: 150rpx;
			height: 90vh;
			background-color: #e9e9e9;

			%base {
				background-color: rgba(250, 250, 250, 0.8);
				backdrop-filter: blur(10rpx);
				border-radius: 20rpx;
				margin: 20rpx;
			}

			.friend_info {
				@extend %base;
				padding: 20rpx 30rpx;
				overflow: hidden;

				.info {
					border-bottom: 1rpx solid rgba(200, 200, 200, 0.5);

					.info_item {
						width: 900rpx;
						display: flex;
						align-items: center;
						margin-bottom: 30rpx;
						border-radius: 20rpx;
						transform: translateX(v-bind(transX));
						transition: transform 0.3s;

						image {
							width: 100rpx;
							height: 100rpx;
							border-radius: 50rpx;
						}

						text {
							font-size: 32rpx;
							padding-left: 20rpx;
						}

						.dle {
							width: 50rpx;
							height: 50rpx;
							padding-right: 20rpx;

							&:active {
								transform: scale(0.9);
							}
						}

						.detail {
							width: 500rpx;
							display: flex;
							flex-direction: column;

							text {
								font-size: 32rpx;
								font-weight: bold;
							}

							:nth-of-type(2) {
								padding-top: 10rpx;
								font-size: 25rpx;
								color: #999999;
								font-weight: 400;
							}
						}

						.icon {
							width: 40rpx;
							height: 40rpx;
						}

						.reddle {
							height: 100rpx;
							width: 150rpx;
							margin-left: 80rpx;
							background-color: #ff1855;
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}
				}

				.create {
					display: flex;
					align-items: center;
					padding-top: 25rpx;
					&:active{
						background-color: #e9e9e9;
					}

					.circle {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50rpx;
						background-color: #e6e6e6;
						display: flex;
						justify-content: center;
						align-items: center;
						margin: 10rpx 0;

					}

					text {
						font-size: 30rpx;
						color: #5a5a5a;
						font-weight: bold;
						letter-spacing: 3rpx;
						padding: 0 20rpx;
					}
				}
			}

			.b_pop {
				height: 350rpx;
				border-radius: 20rpx 20rpx 0 0;
				background-color: #ebebeb;

				.p_head {
					width: 750rpx;
					height: 200rpx;
					padding-top: 20rpx;
					border-radius: 20rpx 20rpx 0 0;
					background-color: #fff;

					.item {
						border-bottom: 1rpx solid #dadada;
						width: 750rpx;
						height: 60rpx;
						padding: 20rpx 0;
						font-size: 34rpx;
						display: flex;
						justify-content: center;

						&:active {
							background-color: #e4e4e4;
						}
					}
				}

				.p_btom {
					margin-top: 30rpx;
					height: 100rpx;
					background-color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 34rpx;
					font-weight: bold;

					&:active {
						background-color: #e4e4e4;
					}
				}
			}

			.d_friend {
				@extend %base;
				font-size: 32rpx;
				color: #5a5a5a;
				letter-spacing: 3rpx;
				display: flex;
				margin-top: 50rpx;
				padding: 30rpx 30rpx;
				font-weight: bold;

				&:active {
					background-color: #d6d6d6;
					transition: background-color 0.1s;
				}
			}
		}
	}
</style>